<template>
    <div class="con">
        <div>
            <span>我的订单</span>
            <div class="point_box">
                <van-icon name="weapp-nav" class="point" />
                <span class="icon_line">|</span>
                <van-icon name="stop-circle" class="point_circle" />
            </div>
        </div>
        <div class="tab_list">
            <van-tabs v-model:active="active" @change="handleTabChange">
                <van-tab v-for="(item, i) in tabs" :key="i" :title="item">
                    <template v-if="i === 0 || item === '未支付' || item === '已完成' || item === '进行中' || item === '待服务'">
                        <div v-for="order in orders" :key="order.id" class="order_box">
                            <van-card :price="`价格：${order.price}`" :title="`服务项目：${order.service_item}`"
                                :thumb='`${order.data_upload}`'>
                                <template #tags>
                                    <p v-if="showDetails[order.id]" class="slot">医院：{{ order.hospital }}</p>
                                    <p v-if="showDetails[order.id]" class="slot">陪诊人：{{ order.escort }}</p>
                                    <p v-if="showDetails[order.id]" class="slot">患者：{{ order.patient }}</p>
                                    <van-tag plain type="primary" class="slot">预计时间：{{
                                        order.expect_time
                                    }}</van-tag>
                                </template>
                                <template #footer>
                                    <van-button @click="toggleDetails(order.id)" size="mini"
                                        class="slot">详情</van-button>
                                    <van-button @click="showDetails[order.id] = false" size="mini" type="danger"
                                        class="slot">{{ order.status }}</van-button>
                                </template>
                            </van-card>
                        </div>
                    </template>
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <div>
        <van-tabbar v-model="change" class="footer">
            <van-tabbar-item class="tabbar">
                <van-icon name="wap-home" class="home" @click="toIndex" />
                首页
            </van-tabbar-item>
            <van-tabbar-item class="tabbar">
                <van-icon name="friends" class="friends" @click="showEscort" />
                陪诊师
            </van-tabbar-item>
            <van-tabbar-item class="tabbar">
                <van-icon name="balance-list" class="list" />
                订单
            </van-tabbar-item>
            <van-tabbar-item class="tabbar">
                <van-icon name="smile" class="mine" @click="toMine" />
                我的
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/http';

const router = useRouter();
let active = ref(0);
let change = ref(2);
let tabs = ref([
    '全部',
    '未支付',
    '待服务',
    '进行中',
    '已完成',
]);
const orders = ref([]);
const showDetails = reactive({})

function handleTabChange(event) {
    const index = event;
    const item = tabs.value[index];
    console.log(item);
    queryOrdersByStatus(item);
}

function queryOrdersByStatus(status) {
    const requestData = {
        status: status
    };
    let requestUrl = '/patient/unpaidorders/';
    if (status === '全部') {
        requestData['get_all'] = true;
    }
    http.post(requestUrl, requestData).then(response => {
        console.log('查询订单成功', response.data.order_info);
        orders.value = response.data.order_info;
        orders.value.forEach(order => {
            showDetails[order.id] = false;
        });
    }).catch((error) => {
        console.log('查询订单失败', error);
    })
}


function toggleDetails(orderId) {
    showDetails[orderId] = !showDetails[orderId];
}

onMounted(() => {
    if (active.value === 0) {
        queryOrdersByStatus('全部');
    };
})

function toIndex() {
    router.push('/index')
}

function showEscort() {
    router.push('/showescort')
}

function toMine() {
    router.push('/mine')
}
</script>
<style scoped>
.con {
    text-align: center;
    margin-top: 5%;
    height: 100%;
}

.point_box {
    position: absolute;
    top: 2%;
    right: 8%;
    width: 25%;
    height: 4%;
    border: 1px solid rgb(232, 229, 229);
    border-radius: 20px;
    background-color: white;
}

.point {
    position: absolute;
    right: 70%;
    top: 15%;
    font-size: 20px;
    color: rgb(139, 139, 139);
}

.icon_line {
    position: absolute;
    right: 50%;
    top: 10%;
    font-size: 20px;
    color: rgba(165, 159, 159, 0.336);
}


.point_circle {
    position: absolute;
    right: 16%;
    top: 15%;
    font-size: 20px;
    color: rgb(140, 138, 138);
}

.tab_list {
    margin: 5% 0 15%;
}

.slot {
    margin: 5px 0;
}

.order_box {
    border: 1px solid rgb(214, 212, 212);
}

.footer {
    padding-top: 10px;
}

.tabbar {
    position: relative;
}

.home,
.friends,
.list,
.mine {
    position: absolute;
    top: -5%;
    left: 37%;
    font-size: 25px;
}

.van-card {
    text-align: left;
}

.desc-show {
    display: none;
}

.van-card__desc {
    margin-top: 5px;
}
</style>